<%@ taglib prefix="c" uri="/WEB-INF/tlds/hdiv-c.tld"%>
<%@ taglib prefix="form" uri="/WEB-INF/tlds/hdiv-spring-form-3_0_4.tld"%>
<%@ taglib prefix="spring" uri="/WEB-INF/tlds/hdiv-spring.tld" %>
<%@ taglib prefix="display" uri="http://displaytag.sf.net" %>

<c:url value="mostrarHWF3013.html" var="indicadoresServicio"/>

<script type="text/javascript">

    function cursor_wait() {
         document.body.style.cursor = 'wait';
    }
    
    function show_loading(){  
        var loadingAnim = document.getElementById('loading_mostrar');  
        loadingAnim.innerHTML = '<img src="imagenes/logoProcesandoDown.gif" width=' + xx_d + 'height=' + yy_d + 'alt="Procesando" />';  
        loadingAnim.style.display = 'block';      
    }  

    $(document).ready(function(){   
        
        var currentTime = new Date();
        var day = currentTime.getDate()-1;
        var cadenaRango='-1m -'+day+'d';
        $("#fechaInic").datepicker({
                            yearRange:'-10:+0',
                            maxDate:cadenaRango,
                            dateFormat: 'dd/mm/yy'
        });
        $("#fechaInic").datepicker('setDate',new Date(new Date()-new Date(1*24*60*60*1000)));
        
        $("#fechaDest").datepicker({
                            yearRange:'-10:+0',
                            maxDate:cadenaRango,
                            dateFormat: 'dd/mm/yy'
        });
        $("#fechaDest").datepicker('setDate',new Date(new Date()-new Date(1*24*60*60*1000)));
        
    });
    
    function mostrar(){
    
        //Validar que la fecha no este vacia
        $("#divError").html("");
        if ($("#fechaInic").val()==""){
            $("#divError").html("Debe ingresar fecha de Inicio");
            return false;
        }
        if ($("#fechaDest").val()==""){
            $("#divError").html("Debe ingresar fecha Fin");
            return false;
        }
        
        if(validaRangoFechas(document.forms[0].fechaInic.value,
                                 document.forms[0].fechaDest.value)==false){
               $("#fechaDest").focus();
               return false
            }  
        
        
        //Mandar llamada AJAX
        $.blockUI({ message: '<img src="imagenes/logoProcesandoRight.gif" />', css:{ backgroundColor: '#FFFFFF', color: '#fff'} });
        
        $.get("<c:url value='mostrarHWF3013.html'/>",{accion:"mostrar",tipoReporte:$("#tipoReporte").val(),nombre:$("#nombre").val(),fechaInic:$("#fechaInic").val(),fechaDest:$("#fechaDest").val()}, function(responseText, status, xmlHttpRequest){
            //repintar en el area correcta
            $('#displayTagTable').html($('#displayTagTable', responseText).html());
            $.unblockUI(); 
        });     
    }
    
    function descargarArchivo(ruta,nombre){
        document.forms[0].accion.value='descargarArchivo';
        document.forms[0].rutaDescarga.value=ruta;
        document.forms[0].nombreDescarga.value=nombre;
        document.forms[0].submit();
    }

</script>

<style type="text/css">  
<!-- 
#loading_mostrar {display:none;}  
--> 

  button{
      width:auto;
      overflow: visible;
    }
    .ui-button { margin-left: -1px;}
    .ui-button-icon-only .ui-button-text { padding: 0; } 
    .ui-autocomplete-input { margin: 0; padding: 0;}
    /* ---------------------------------------------------------------
    Clearfix
    --------------------------------------------------------------- */
    .clearfix:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
    }
    
    .clearfix { display: inline-block; }
    
    /* Hides from IE-mac \*/
    * html .clearfix { height: 1%; }
    .clearfix { display: block; }
    /* End hide from IE-mac */
    ul#icons {margin: 0; padding: 0;}
    ul#icons li {margin: 1px; position: relative; padding: 1px 0; cursor: pointer; float: left;  list-style: none;}
    ul#icons span.ui-icon {float: left; margin: 0 1px;}
    .scrollable{
        overflow: auto;
        width: 600px;
        height:380px;
    }
    .scrollable table{
        width: 600px;
        color:red;
    }   

</style> 

<form:form modelAttribute="form" action="${indicadoresServicio}">
<form:hidden path="control"/>
<form:hidden path="accion"/>
<form:hidden path="rutaDescarga"/>
<form:hidden path="nombreDescarga"/>

<!--Favoritos:-->
<input type="hidden" id="codOpci" value="${codOpci}"/>
<input type="hidden" id="desOpci" value="${desOpci}"/>

<table id="fullheighttable" width="775" cellspacing="0" cellpadding="0" align="center">
  <tr>
    <td align="left" valign="top" class="fondo_contenido padtop16left21">
      <table border="0" cellspacing="0" cellpadding="0" class="verdana11bazul">
      <tr>
        <td height="22" align="left" valign="top" class="verdana11bazul">
		<ul class="navlist2">
		<li>INDICADORES DE SERVICIO </li>
		</ul>
        </td>
        <td width="130"></td>
        <td> <a href="#" id="opener_agregarFavoritos"> <img src="images/agregar_favoritos.png" width="25" height="23" border="0" title='Agregar Favoritos'/> </a></td>
        </tr>
      <tr>
        <td align="left" valign="top" class="borde_totalblanco"><table border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="100" height="23" align="left" valign="top" class="verdana10bazul">Cliente</td>
            <td height="23" align="left" valign="top" class="verdana10negro"
                width="416">                
                <c:out value="${sessionScope.nombreCliente}"/>
               </td>
          </tr>
          
         <!-- Seccion para Tipo-->
          <tr>
            <td width="100" height="27" align="left" valign="center" class="verdana10bazul">Tipo de Reporte</td>
            <td height="27" align="left" valign="bottom" class="verdana10negro"
                width="416">
         
            <table border="0">
             <tr>
                 <td>
                    <div class="fondo_txtbox90">
                       <form:select cssClass="fondo_txtbox63" cssStyle="height: 20px; width: 180px; font-family: Arial; font-size: 8pt"
                                         path="tipoReporte">
                           <form:option value="0">TODOS</form:option>
                                <form:options items="${listaTiposArchivo}"
                                              itemValue="codReporte"
                                              itemLabel="desReporte"/>
                       </form:select>
                    </div>
                 </td>   
            </tr>    
            </table>    
            </td>
          </tr>

          <!--- Seccion para Nombre-->
          <tr>
            <td width="100" height="27" align="left" valign="bottom" class="verdana10bazul">Nombre</td>
            <td height="27" align="left" valign="bottom" class="verdana10negro"
                width="416">
         
            <table border="0">
             <tr>
                <td>
                <div class="fondo_txtbox123">
                    <form:input path="nombre"/>                 
                </div>
                </td>
            </tr>    
            </table>           
            
            </td>
          </tr>
          <!--- Seccion para Fecha--> 
          <tr>
            <td height="34" align="left" valign="bottom" class="verdana10bazul"
                width="100">Fecha</td>
            <td height="34" align="left" valign="bottom" class="verdana10negro"
                width="416">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                  <td align="center" valign="bottom" class="padright10"><div class="fondo_txtbox90">
                       <form:input path="fechaInic" maxlength="11" size="12" />
                        </div></td>
                  <td class="verdana10bazul" align="right">&nbsp;&nbsp;al&nbsp;&nbsp;&nbsp;</td>
                  <td align="center" valign="middle"><div class="fondo_txtbox90">
                  <form:input path="fechaDest" maxlength="11" size="12" /></div></td>
                  <td width="140" align="right" valign="middle">                    
                    <input type="button" class="boton" value="Mostrar" onclick="javascript:mostrar();"/>
                  </td>
                </tr>
            </table></td>
          </tr>
        </table>
        </td>
      </tr>
          <tr>
                <td colspan="6" align="center">    
                <div id="loading_mostrar"><img id="logoDown" src="imagenes/logoProcesandoDown.gif" alt="Procesando" /></div>  
                </td>
          </tr>
      </table>
   <div id="displayTagTable"> 
    <table>
    <tr>
        <td style="text-align:center;">
            <div id="divError" style="color:red;">
                ${mensajeError}      
            </div>
        </td>
    </tr>
    </table>
    <c:if test="${mostrarGrilla}"> 
      <table border="0" cellpadding="0" cellspacing="0" class="margintop20" >
        <tr >
          <td width="100%">
            
              <display:table id="archivo" name="listaArchivos" cellpadding="0"
                             cellspacing="0" style="width:720px" pagesize="10"
                             requestURI="${indicadoresServicio}"
                             class="its">
               <tbody>
                <display:column property="nombre" style="width:55%;"
                                headerClass="even" class="even "
                                title="Nombre del archivo"/>
                <display:column property="desTipo" style="width:15%;"
                                headerClass="even" class="cellderecha "
                                title="Tipo de Reporte"/>
                <display:column property="fecha" style="width:15%;"
                                headerClass="even" class="cellderecha "
                                title="Fecha"/>
                <display:column style="width:15%;" headerClass="even" class="cellderecha "
                                title="Descargas">
                                <ul id="icons"><li><a href="#" onclick="descargarArchivo('${archivo.rutaDescarga}','${archivo.nombre}');" ><span class='ui-icon ui-icon-arrowthickstop-1-s'></span></a></li></ul>   
                </display:column>
               </tbody>
              </display:table>
            
          </td>
        </tr>
        <tr><td>&nbsp;</td>
        </tr>
        <tr><td>
        </td>
        </tr>
      </table>
    </c:if>
    </div>
    </td>
  </tr>
</table>
</form:form> 